<template>
  <div>
    <Container>
      <el-row :gutter="20">
        <el-col :md="12">
          <el-row>
            <el-col :md="24" class="title">联系律师</el-col>
            <el-col :md="24" class="content">
              <el-row>
                <el-col :md="10">
                  <img :src="site_config.photo" alt="" height="210px" />
                </el-col>
                <el-col :md="14" style="padding-top: 10px">
                  <p style="font-size: x-large" class="mb">{{ site_config.short_name }}</p>
                  <p class="mb">律师电话：{{ site_config.mobile }}</p>
                  <p class="mb">办公地址：{{ site_config.adress }}</p>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
        <el-col :md="12">
          <el-row>
            <el-col :md="24" class="title">律师简介</el-col>
            <el-col :md="24" class="content">
              <p style="text-indent: 2rem; display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 6; overflow: hidden">
                {{ usePost.post.post_excerpt }}
              </p>
              <el-button @click="router.push('/about')" style="position: absolute; bottom: 10px; right: 20px; color: #715700"
                >更多&nbsp;&nbsp;>></el-button
              >
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :md="24" class="title"> 律师风采 </el-col>
        <el-col :md="24" class="">
          <el-carousel type="card" :interval="3000" class="carousel">
            <el-carousel-item v-for="url in caroursel_urls" :key="url">
              <img :src="url" alt="" class="slider-img" />
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
      <el-row class="post" :gutter="20">
        <el-col :md="8" v-for="category in indexArticleStores.indexArticles">
          <el-row>
            <el-col :md="24" class="title">{{ category.name }}</el-col>
            <el-col :md="24" class="post-list">
              <el-row v-for="post in category.post_list">
                <el-col :md="18" class="post-title"
                  ><NuxtLink :to="'/post/detail/' + post.id">{{ post.post_title }}</NuxtLink></el-col
                >
                <el-col :md="6" class="post-date">{{ formatDate(post.published_time) }}</el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </Container>
  </div>
</template>
<script setup lang="ts">
import { get_about_page } from '~/api';

const caroursel_urls = ref<string[]>([]);
const site_config = useSiteConfigStore();
caroursel_urls.value = site_config.carousel;
const indexArticleStores = useIndexArticles();
await indexArticleStores.getIndexArticles();
const usePost = usePostStore();
const data = await get_about_page();
if (data) {
  usePost.post = data;
}
const router = useRouter();
</script>
<style scoped>
.title {
  background: url(https://www.dzklawyer.com/themes/ls/static/images/arrow_right.png) no-repeat left;
  padding-left: 32px;
  font-size: 20px;
  margin-top: 40px;
  margin-bottom: 20px;
}
.content {
  background-color: #fff;
  height: 250px;
  padding: 10px;
  line-height: 1.9rem;
}
.mb {
  margin-bottom: 10px;
}
.slider-img {
  object-fit: contain;
  width: 100%;
}
.post-list {
  background-color: #fff;
  padding: 20px;
  line-height: 2rem;
}
.post-date {
  text-align: right;
  color: #ccc;
  font-size: 14px;
}
.post-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-title > a {
  color: #333;
  text-decoration: none;
}
.post-title > a:hover {
  text-decoration: underline;
  color: #000;
}
</style>
